<template>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="size"
    :total="total"
    :current-page="page"
    @current-change="currentChange"
  >
  </el-pagination>

</template>

<script>
    export default {
        name: "Pagination",
        props:{
          total:Number,
          page:Number,
          size:Number
        },
        methods:{
          currentChange(e){
            // console.log('e:'+e);
            this.$emit('currentChange',e);
          }
        }
    }
</script>

<style>
  .el-pagination{
    text-align: center;
    margin-bottom: 20px}
  .el-pagination /deep/ button{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
  .el-pagination /deep/ .el-pager .number{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
  .el-pagination /deep/ .el-pager .number.active:hover{
    color: #606266 !important;
  }
  .el-pagination.is-background /deep/.el-pager li:not(.disabled).active {
    background: #31c27c;
    color: #FFF;
  }
  .el-pagination.is-background /deep/ .el-icon{
    height: 50px;
    width: 48px;
    line-height: 50px;
  }
</style>
